<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:s="http://jboss.com/products/seam/taglib"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <ui:composition template="/template/principal.xhtml">
        <ui:define name="corpo">
            <h:form>
                <a4j:outputPanel id="painelListagem">
                    <a4j:commandLink action="#{editarPessoaAction.novoCadastro}" status="waitStatus" oncomplete="#{rich:component('mp_inclusao')}.show()" reRender="mp_inclusao" value="Novo cadastro"/>
                    <br/><br/>
                    <rich:dataTable onRowMouseOver="this.style.backgroundColor='#F1F1F1'" id="tabPessoas" rows="5"
                                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'"
                                                cellpadding="0" cellspacing="0"
                                                width="100%" border="0" var="pes" value="#{consultarPessoaAction.pessoas}">
                                    <f:facet name="header">
                                        <rich:columnGroup>
                                            <rich:column width="70%">
                                                <h:outputText value="Nome" />
                                            </rich:column>
                                            <rich:column width="30%" colspan="3">
                                                <h:outputText value="Operações" />
                                            </rich:column>
                                        </rich:columnGroup>
                                    </f:facet>
                                    <rich:columnGroup>
                                        <rich:column>
                                            <h:outputText value="#{pes.nome}" />
                                        </rich:column>
                                        <rich:column>
                                            <a4j:commandLink action="#{consultarPessoaAction.detalharPessoa}" status="waitStatus" oncomplete="#{rich:component('mp_detalhamento')}.show()" reRender="mp_detalhamento" value="Detalhar">
                                                <f:param name="idPessoa" value="#{pes.id}"/>
                                            </a4j:commandLink>
                                        </rich:column>
                                        <rich:column>
                                            <a4j:commandLink action="#{editarPessoaAction.editar}" status="waitStatus" oncomplete="#{rich:component('mp_alteracao')}.show()" reRender="mp_alteracao" value="Editar">
                                                <f:param name="idPessoa" value="#{pes.id}"/>
                                            </a4j:commandLink>
                                        </rich:column>
                                        <rich:column>
                                            <a4j:commandLink action="#{editarPessoaAction.editar}" status="waitStatus" oncomplete="#{rich:component('mp_exclusao')}.show()" reRender="mp_exclusao" value="Excluir">
                                                <f:param name="idPessoa" value="#{pes.id}"/>
                                            </a4j:commandLink>
                                        </rich:column>

                                    </rich:columnGroup>
                                </rich:dataTable>
                                <rich:datascroller align="center" for="tabPessoas" maxPages="30"  id="dtScrollPessoa"/>
                </a4j:outputPanel>
            </h:form>
            <!-- Tela de Alteração de Pessoa -->
            <rich:modalPanel id="mp_alteracao" width="450" autosized="true" resizeable="false">
                <a4j:outputPanel id="dadosAlteracao">
                    <s:fragment rendered="#{editarPessoaAction.tipoTela eq editarPessoaAction.TELA_EDICAO}">
                        <a4j:form id="formAlteracao">
                             <rich:panel id="painelAlteracao" rendered="#{editarPessoaAction.pessoa ne null}">
                                 <f:facet name="header">Edição de Pessoa</f:facet>
                                 Nome: <h:inputText value="#{editarPessoaAction.pessoa.nome}" required="true" id="nomeEdicao"/>
                                 <rich:message for="nomeEdicao" >
                                      <f:facet name="errorMarker">
                                            <h:graphicImage url="/imagens/erro.gif"/>
                                      </f:facet>
                                </rich:message>
                                 <br/>
                                 CPF: <p:inputMask value="#{editarPessoaAction.pessoa.cpf}" mask="999.999.999-99" required="true" id="cpfEdicao" converter="cpfConverter" maxlength="14" validator="cpfValidator"/>
                                 <rich:message for="cpfEdicao" >
                                      <f:facet name="errorMarker">
                                            <h:graphicImage url="/imagens/erro.gif"/>
                                      </f:facet>
                                </rich:message>
                                 <br/><br/>
                                 <a4j:commandButton action="#{editarPessoaAction.confirmarAlteracao}" status="waitStatus" value="Confirmar" style="width: 100px;" reRender="painelListagem, dadosAlteracao"/>

                                 <a4j:commandButton onclick="#{rich:component('mp_alteracao')}.hide();" value="Cancelar" style="width: 100px;"/>
                            </rich:panel>
                         </a4j:form>
                    </s:fragment>
                    <s:fragment rendered="#{editarPessoaAction.tipoTela eq editarPessoaAction.TELA_SUCESSO}">
                        A pessoa "#{editarPessoaAction.pessoa.nome}" foi alterada com sucesso!
                        <br/><br/>
                        <h:commandButton onclick="#{rich:component('mp_alteracao')}.hide();" value="Fechar"/>
                    </s:fragment>

                </a4j:outputPanel>

            </rich:modalPanel>
            <!-- Tela de Exclusão de Pessoa -->
            <rich:modalPanel id="mp_exclusao" width="450" autosized="true" resizeable="false">
                <a4j:outputPanel id="dadosExclusao">
                    <s:fragment rendered="#{editarPessoaAction.tipoTela eq editarPessoaAction.TELA_EDICAO}">
                        <a4j:form id="formExclusao">
                             <rich:panel id="painelExclusao" rendered="#{editarPessoaAction.pessoa ne null}">
                                 <f:facet name="header">Exclusão de Pessoa</f:facet>
                                 Deseja realmente excluir a pessoa "#{editarPessoaAction.pessoa.nome}"?
                                 <br/><br/>
                                 <a4j:commandButton action="#{editarPessoaAction.confirmarExclusao}" status="waitStatus" value="Confirmar" style="width: 100px;" reRender="painelListagem, dadosExclusao"/>

                                 <a4j:commandButton onclick="#{rich:component('mp_exclusao')}.hide();" value="Cancelar" style="width: 100px;"/>
                            </rich:panel>
                         </a4j:form>
                    </s:fragment>
                    <s:fragment rendered="#{editarPessoaAction.tipoTela eq editarPessoaAction.TELA_SUCESSO}">
                        A pessoa "#{editarPessoaAction.pessoa.nome}" foi excluida com sucesso!
                        <br/><br/>
                        <h:commandButton onclick="#{rich:component('mp_exclusao')}.hide();" value="Fechar"/>
                    </s:fragment>
                </a4j:outputPanel>
            </rich:modalPanel>
            <!-- Tela de Inclusão de Pessoa -->
            <rich:modalPanel id="mp_inclusao" width="450" autosized="true" resizeable="false">
                <a4j:outputPanel id="dadosInclusao">
                    <s:fragment rendered="#{editarPessoaAction.tipoTela eq editarPessoaAction.TELA_EDICAO}">
                        <a4j:form id="formInclusao">
                             <rich:panel id="painelInclusao" rendered="#{editarPessoaAction.pessoa ne null}">
                                 <f:facet name="header">Novo cadastro</f:facet>
                                 Nome: <h:inputText value="#{editarPessoaAction.pessoa.nome}" id="nomeInclusao" required="true"/>
                                 <rich:message for="nomeInclusao" >
                                      <f:facet name="errorMarker">
                                            <h:graphicImage url="/imagens/erro.gif"/>
                                      </f:facet>
                                </rich:message>
                                 <br/>
                                 CPF: <p:inputMask value="#{editarPessoaAction.pessoa.cpf}" mask="999.999.999-99" id="cpfInclusao" required="true" converter="cpfConverter" maxlength="14" validator="cpfValidator"/>
                                 <rich:message for="cpfInclusao" >
                                      <f:facet name="errorMarker">
                                            <h:graphicImage url="/imagens/erro.gif"/>
                                      </f:facet>
                                </rich:message>
                                 <br/><br/>
                                 <a4j:commandButton action="#{editarPessoaAction.confirmarInclusao}" status="waitStatus" value="Confirmar" style="width: 100px;" reRender="painelListagem, dadosInclusao"/>

                                 <a4j:commandButton onclick="#{rich:component('mp_inclusao')}.hide();" value="Cancelar" style="width: 100px;"/>
                            </rich:panel>
                         </a4j:form>
                     </s:fragment>
                    <s:fragment rendered="#{editarPessoaAction.tipoTela eq editarPessoaAction.TELA_SUCESSO}">
                        A pessoa "#{editarPessoaAction.pessoa.nome}" foi inserida com sucesso!
                        <br/><br/>
                        <h:commandButton onclick="#{rich:component('mp_inclusao')}.hide();" value="Fechar"/>
                    </s:fragment>
                </a4j:outputPanel>

            </rich:modalPanel>
            <!-- Tela de Detalhamento de Pessoa -->
            <rich:modalPanel id="mp_detalhamento" width="450" autosized="true" resizeable="false">
                 <a4j:form id="formDetalhamento">
                     <rich:panel id="painelDetalhamento" rendered="#{consultarPessoaAction.pessoa ne null}">
                         <f:facet name="header">Detalhamento de Pessoa</f:facet>
                         Nome: #{consultarPessoaAction.pessoa.nome}<br/>
                         CPF: <h:outputText value="#{consultarPessoaAction.pessoa.cpf}" converter="cpfConverter"/>
                         <br/><br/>
                         <a4j:commandButton onclick="#{rich:component('mp_detalhamento')}.hide();" value="Fechar" style="width: 100px;"/>
                    </rich:panel>
                 </a4j:form>
            </rich:modalPanel>
        </ui:define>
    </ui:composition>
</html>

